<template>
  <div class="main">
    <div class="title">
      <div class="titleBlock"></div>
      <div class="titleText">门诊消费记录</div>
    </div>
    <div class="table">
      <el-form :inline="true" class="tableHeader">
        <el-form-item>
          <el-date-picker
            v-model="value"
            type="daterange"
            start-placeholder="请选择开始日期"
            end-placeholder="请选择结束日期"
            @change="changeDate"
          />
        </el-form-item>
        <el-form-item>
          <el-input v-model="form1.search" placeholder="请输入病人姓名" />
          <!-- <input type="text" /> -->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="selectTable">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTableRef"
        :data="nowdata"
        style="width: 100%"
        size="large"
      >
        <el-table-column type="selection" />
        <el-table-column property="Operating_time" label="操作时间" />
        <el-table-column property="order_no" label="订单号" />
        <el-table-column property="pay_patient_name" label="患者姓名" />
        <el-table-column property="card_number" label="就诊卡号" />
        <el-table-column property="source" label="来源" />
        <el-table-column property="Business_types" label="业务类型" />
        <el-table-column property="Cost_type" label="费用类型" />
        <el-table-column property="Method_payment" label="支付方式" />
        <el-table-column property="amount" label="支付金额" />
        <el-table-column property="Payment_status" label="缴费状态">
          <template #default="scope">
            <el-tag
              type="success"
              color="#fff"
              v-if="scope.row.Payment_status == 1"
              >已缴费</el-tag
            >
            <el-tag
              type="success"
              color="#fff"
              v-else-if="scope.row.Payment_status == 2"
              >待缴费</el-tag
            >
          </template></el-table-column
        >
        <el-table-column label="操作">
          <template #default="scope">
            <el-icon color="#006eff" :size="23" @click="details(scope.row)"
              ><Tickets
            /></el-icon>
          </template>
        </el-table-column>
      </el-table>
      <page :count="count" @changePage="changePage"></page>
    </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs, computed, watch } from "vue";
import { useRouter } from "vue-router";
import { getCostPay, getTable } from "../../utils/api/hesuan";
import format from "../../utils/formatDay_ssh";
import page from "../../components/yema_ssh/yema.vue";
import storege from "../../utils/storege";
export default {
  props: {},
  components: {
    page,
  },
  setup() {
    const data = reactive({
      radio: 1,
      value: null,
      tableData: [],
      count: null,
      page: 1,
      form1: {
        startDate: "",
        endDate: "",
        search: "",
      },
    });
    const nowdata = computed(() => {
      let qishi = (data.page - 1) * 5;

      return data.tableData.slice(qishi, qishi + 5);
    });
    const getall = () => {
      getCostPay().then((res) => {
        data.tableData = res.data.data;

        data.count = data.tableData.length;
        data.tableData.forEach((item) => {
          item.Operating_time = format(item.Operating_time);
        });
      });
    };
    getall();
    const router = useRouter();
    const details = (value) => {
      storege.setStorage("row", value);
      router.push({ path: "/home/costdManage/torderInformation" });
    };

    const props = {
      expandTrigger: "hover",
    };

    const changePage = (page) => {
      data.page = page;
    };
    const changeDate = () => {
      console.log(data.value);
      if (data.value == null) {
        data.form1.startDate = null;
        data.form1.endDate = null;
      } else {
        data.form1.startDate = format(data.value[0]);
        data.form1.endDate = format(data.value[1]);
      }
    };
    changeDate();
    const selectTable = () => {
      getTable(data.form1).then((res) => {
        data.tableData = res.data.data;
        data.count = data.tableData.length;
      });
    };

    return {
      ...toRefs(data),
      details,
      props,
      nowdata,
      changePage,
      changeDate,
      selectTable,
    };
  },
};
</script>
<style lang="scss" scoped>
.example-block {
  margin: 1rem;
}
.example-demonstration {
  margin: 1rem;
}
.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0 30px;
  box-sizing: border-box;
  .titleBlock {
    width: 50px;
    height: 13px;
    background-color: #006eff;
    border-radius: 20px;
  }
  .titleText {
    font-size: 30px;
    margin-left: 20px;
  }
}
.table {
  padding: 20px;
  box-sizing: border-box;
  background-color: #ffffff;
  box-shadow: 1px 1px 5px 1px rgba(194, 188, 188, 0.486);
  .tableHeader {
    margin-bottom: 20px;
  }
  .tableFooter {
    border: 1px solid red;
    padding: 30px;
    box-sizing: border-box;
    margin-top: 20px;
  }
}
</style>